<template>
  <div class="home" style="height: 100%">
    <el-container style="height: 100%">
      <el-aside width="200px">
        <el-menu style="height: 100%;" @select="handleMenuSelect" :router="true" background-color="#545c64"
          text-color="#fff" active-text-color="#ffd04b">
          <el-menu-item v-for="item in menus" :class="{'is-active': item.href == $store.state.menu_active}"
            :index="item.href" :key="item.id">
            <i class="el-icon-setting"></i>
            <span slot="title">{{item.title}}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <h2 style="margin: 0px 0px; width: 200px">宿舍管理系统</h2>
          <div style="flex: 1">
            <span>首页 /</span>
            <span> {{$store.state.userInfo.account}}</span>
            <span style="color: red"> {{$store.state.userInfo.msg}}</span>
          </div>
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              <el-avatar size="large" :src="require('../assets/logo.png')"></el-avatar>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="userinfo">个人信息</el-dropdown-item>
              <el-dropdown-item command="loginout">注销账号</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>
        <el-main style="padding: 3px">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import menusApi from '@/http/menusApi'
  import loginApi from '@/http/loginApi'
  export default {
    name: 'Home',
    created() {
      this.$store.dispatch('GET_USERINFO_ACTIONS');
      this.$store.dispatch('GET_DORMS_ACTIONS');
      menusApi.findAll().then(res => {
        if (res.data.code == 200) {
          this.menus = res.data.data;
        }
      })
    },
    data() {
      return {
        menus: [],
      };
    },
    methods: {
      handleMenuSelect(index) {
        this.$store.commit('SET_MENUS_ACTIVE', index);
      },
      handleCommand(command) {
        if (command == 'loginout') {
          loginApi.logout().then(res => {
            if (res.data.code == 200) {
              this.$message.info(res.data.msg);
              sessionStorage.clear();
              this.$router.replace("/login");
            }
          })
        }
      },
    },
  };
</script>
<style>
  .el-header {
    background-color: #ffffff;
    color: #333;
    display: flex;
    align-items: center;
      box-shadow: -3px 0px 3px rgb(0 0 0 / 10%) inset;
  }
  .el-aside {
    background-color: #d3dce6;
    color: #333;

  }

  element.style{
        padding: 0px;
  }

  .el-main {
    background-color: #e9eef3;
    color: #333;
  }

  body>.el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>